<template>
  <div class="box">
    <!-- <span class="title">任务中心</span> -->
    <Tabs v-model="tabKey" class="tabs-app">
      <TabPane label="填报管理" name="filling" class="tab-pane">
        <filling v-if="tabKey == 'filling'"></filling>
      </TabPane>
      <TabPane label="审批管理" name="approval" class="tab-pane">
        <approval v-if="tabKey == 'approval'"></approval>
      </TabPane>
      <TabPane label="消息管理" name="remind" class="tab-pane">
        <remind v-if="tabKey == 'remind'"></remind>
      </TabPane>
      <TabPane label="任务管理" name="taskManage" class="tab-pane">
        <taskManage v-if="tabKey == 'taskManage'"></taskManage>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import approval from './approval.vue'
import filling from './filling.vue'
import remind from '@/views/systemManagement/remind/index.vue'
import taskManage from '@/views/systemManagement/systemConfigManage/index.vue'

import { mapState } from 'vuex'
export default {
  name: 'myApprovel',
  mixins: [],
  components: {
    approval,
    filling,
    remind,
    taskManage
  },
  created() {
    this.init()
  },
  computed: {
    ...mapState(['buList', 'menuList'])
  },
  data() {
    return {
      tabKey: 'filling',
      bussinessUnit: []
    }
  },
  methods: {
    init() {
      if (!this.buList.length) {
        this.$store.dispatch('getBuUnit')
      }
      if (!this.menuList || this.menuList.length == 0) {
        this.$store.dispatch('getMenuList')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  .tabs-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    /deep/.ivu-tabs-content {
      flex: 1;
    }
  }
}
.title {
  font-size: 18px;
  font-weight: bold;
  padding-left: 14px;
  padding-top: 8px;
  padding-bottom: 0px;
}
/deep/.single-table-con {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
